<template>
  <span class="container">
    <!-- 根据条件来决定当前用户或角色是否对于该按钮显示 -->
    <el-button v-if="show" :size="size" :disabled="disabled" @click="actionFn" :type="type" :icon="icon">
      <slot>按钮</slot>
    </el-button>
  </span>
</template>

<script>
import { checkRoleBtnActionApi } from '@/api/userApi'
export default {
  props: {
    action: {
      type: String,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    icon: String,
    type: String,
    size: {
      type: String,
      default: 'default'
    }
  },
  data() {
    return {
      show: false
    }
  },
  computed: {
    role() {
      return this.$store.getters.roleid
    }
  },
  async created() {
    let roleid = this.$store.getters.roleid
    let ret = await checkRoleBtnActionApi(roleid, this.action)
    this.show = ret.data == 1 ? true : false
  },
  methods: {
    actionFn() {
      this.$emit('actionFn')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin-left: 10px;
}
</style>
